<template>
  <view>
    <u-navbar safeAreaInsetTop title-bold :border-bottom="false">
      <view slot="left" class="common-sty nav-left-wrap">
        <u-icon
          class="common-sty icon"
          color="rgb(0, 0, 0)"
          size="20"
          name="arrow-left"
          @click="back"
        ></u-icon>
        <view
          class="nav-left"
          :class="!hospital ? 'underlin' : ''"
          @click="goLeft"
          >就诊缴费</view
        >
      </view>
      <view slot="right" class="common-sty nav-right-wrap">
        <view
          class="nav-right"
          :class="hospital ? 'underlin' : ''"
          @click="goRight"
          >住院缴费</view
        >
      </view>
    </u-navbar>
    <swiper
      class="patient-list"
      :duration="300"
      :autoplay="false"
      :indicator-dots="true"
      @change="({ detail }) => changePatient(detail)"
    >
      <swiper-item v-for="(item, index) in patientList" :key="index">
        <view class="common-sty icon">
          <view class="icon-name">{{ item.name.slice(0, 1) }}</view>
        </view>
        <view class="common-sty title">
          <view class="user-name">
            <text class="uname">{{
              item.name.length > 3 ? item.name.slice(0, 3) + "..." : item.name
            }}</text>
            <text class="relation">{{ item.relation_type }}</text>
          </view>
          <view class="user-gender"
            >{{ item.gender_type }} {{ item.age }}岁</view
          >
        </view>
        <view class="common-sty pay">需缴纳{{ item.price }}元</view>
      </swiper-item>
    </swiper>
    <view
      class="examination-wrap"
      v-if="
        examinationList &&
        examinationList[currentPatient] &&
        examinationList[currentPatient].length
      "
    >
      <view
        class="examination-list"
        v-for="(item, index) in examinationList[currentPatient]"
        :class="
          index !== examinationList[currentPatient].length - 1
            ? 'examination-border'
            : ''
        "
        :key="index + getKey()"
      >
        <view class="common-sty">
          <view class="check-box">
            <u-checkbox-group @change="(e) => changeExaminationItem(index, e)">
              <u-checkbox
                activeColor="#09bb07"
                shape="circle"
                :checked="item.checked"
              />
            </u-checkbox-group>
          </view>
        </view>
        <view class="common-sty content">
          <text class="title">{{ item.title }}</text>
          <view class="tab">
            <view class="tab-row">
              <view class="tab-cell">就诊机构：</view>
              <view class="tab-cell">{{ item.hospital.title }}</view>
            </view>
            <view class="tab-row">
              <view class="tab-cell">就诊科室：</view>
              <view class="tab-cell">{{ item.hospital.section.title }}</view>
            </view>
            <view class="tab-row">
              <view class="tab-cell">开具时间：</view>
              <view class="tab-cell">{{ item.created_at }}</view>
            </view>
            <view class="tab-row">
              <view class="tab-cell">诊断医生：</view>
              <view class="tab-cell">{{ item.doctor.realname }}</view>
            </view>
          </view>
        </view>
        <view class="common-sty price">￥{{ item.price }}</view>
      </view>
    </view>
    <view v-else class="update-wrap">
      <view class="update-img"></view>
      <text class="update-text">暂无缴费订单</text>
      <u-button text="刷新" class="update-btn" @click="updateInfo"></u-button>
    </view>
    <view class="footer">
      <text class="common-sty text">合计：{{ plus }} 元</text>
      <u-button text="支付" class="submit"></u-button>
    </view>
  </view>
</template>

<script>
import payUrl from "@/api/pay.js";

export default {
  data() {
    return {
      hospitalID: "",
      hospital: 0,
      patientList: [],
      examinationList: [],
      currentPatient: 0,
    };
  },

  onLoad({ hospitalID, hospital }) {
    this.hospitalID = hospitalID;
    this.hospital = hospital;
    this.updateInfo();
  },

  methods: {
    // 更新
    updateInfo() {
      this.$axios({
        url: payUrl.patient,
        data: this.hospital
          ? { hospital_id: this.hospitalID, hospital: this.hospital }
          : { hospital_id: this.hospitalID },
      }).then((res) => {
        this.patientList = res && res.data && res.data.patient;
        this.examinationList = res && res.data && res.data.list;
      });
    },

    // 修改患者
    changePatient({ current }) {
      this.currentPatient = current;
    },

    // 更新检查项
    changeExaminationItem(index, e) {
      this.examinationList = this.examinationList.map((examination, _index) => {
        if (_index !== this.currentPatient) {
          return examination;
        } else {
          return (
            examination &&
            examination.map((item, i) => {
              if (i !== index) {
                return item;
              } else {
                return {
                  ...item,
                  checked: !item.checked,
                };
              }
            })
          );
        }
      });
    },

    // 每个检查项获取一个全局不同的id
    getKey() {
      return new Date().getTime();
    },

    // 回退
    back() {
      uni.navigateBack({});
    },

    // 点击门诊缴费
    goLeft() {
      uni.navigateTo({
        url: `/pages/pay/payfor/index?hospitalID=${this.hospitalID}`,
      });
    },

    // 点击住院缴费
    goRight() {
      uni.navigateTo({
        url: `/pages/pay/payfor/index?hospitalID=${this.hospitalID}&hospital=1`,
      });
    },
  },

  computed: {
    // 求和
    plus: function () {
      if (!this.examinationList || !this.examinationList[this.currentPatient]) {
        return 0;
      }
      return this.examinationList[this.currentPatient].reduce((total, item) => {
        if (item.checked) {
          return total + parseFloat(item.price);
        } else {
          return total + 0;
        }
      }, 0);
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-left-wrap {
  width: 375rpx;
  position: absolute;
  left: 0;

  & .icon {
    margin-left: 20rpx;
  }

  & .nav-left {
    font-size: 36rpx;
    font-weight: bold;
    text-align: right;
    float: right;
    padding: 0 10rpx;
  }
}

.underlin {
  border-bottom: 5rpx solid rgba(65, 171, 133, 1);
}

.nav-right-wrap {
  width: 375rpx;
  position: absolute;
  right: 0;

  & .nav-right {
    padding: 0 10rpx;
    font-size: 36rpx;
    font-weight: bold;
    float: left;
  }
}

.common-sty {
  float: left;
  height: 100%;
}

.patient-list {
  height: 200rpx;
  background: #fff;
  margin: 20rpx;
  border-radius: 10rpx;

  & .icon {
    width: 150rpx;

    & .icon-name {
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
      background: rgb(65, 171, 133);
      text-align: center;
      line-height: 80rpx;
      font-size: 40rpx;
      color: #fff;
      position: relative;
      top: 50rpx;
      left: 25rpx;
    }
  }

  & .title {
    width: 300rpx;

    & .user-name {
      margin-top: 20rpx;
      font-size: 40rpx;

      & .uname {
        padding-right: 20rpx;
      }

      & .relation {
        background-color: rgb(176, 203, 233);
        color: #fff;
        padding: 0 20rpx;
        height: 30rpx;
        border-radius: 30rpx;
        font-size: 28rpx;
      }
    }

    & .user-gender {
      font-weight: 500;
    }
  }

  & .pay {
    width: 250rpx;
    line-height: 200rpx;
    text-align: right;
  }
}

.update-wrap {
  margin: 0 auto;
  width: 183rpx;

  & .update-img {
    height: 300rpx;
    background-image: url(../assets/update.png);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  & .update-text {
    color: rgba(166, 166, 166, 1);
  }

  & .update-btn {
    margin-top: 20rpx;
    border-radius: 35rpx;
    height: 70rpx;
  }
}

.examination-wrap {
  position: absolute;
  left: 20rpx;
  right: 20rpx;
  top: 320rpx;
  bottom: 90rpx;
  overflow: scroll;

  & .examination-border {
    border-bottom: 5rpx solid rgb(229, 229, 229);
  }

  & .examination-list {
    border-radius: 10rpx;
    width: 710rpx;
    height: 265rpx;
    background: #fff;

    & .check-box {
      width: 50rpx;
      padding-left: 15rpx;
      padding-top: 120rpx;
    }

    & .price {
      color: rgb(255, 87, 51);
      font-size: 40rpx;
    }

    & .content {
      width: 500rpx;
      padding-left: 15rpx;

      & .title {
        color: rgb(80, 80, 80);
        font-weight: bold;
        font-size: 30rpx;
      }

      & .tab {
        display: table;
        color: rgb(166, 166, 166);

        & .tab-row {
          display: table-row;

          & .tab-cell {
            display: table-cell;
          }
        }
      }
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  height: 90rpx;
  width: 100%;
  background: #fff;
  font-weight: bold;

  & .text {
    line-height: 90rpx;
    padding-left: 16rpx;
    font-size: 14rpx;
  }

  & .submit {
    float: right;
    height: 100%;
    width: 215rpx;
    border-radius: 0;
    background: rgb(65, 171, 133);
    color: #fff;
    font-size: 16rpx;
  }
}
</style>
